﻿
@{
    Layout = null;
    Double modelPrice = 0;
    Double modelTotal = 0;
    int modelCount = 0;
    String modelKind = "";
    int modelStyle = 0;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>云瑞家庭农场</title>
    <link rel="shortcut icon" href="~/Content/assets/i/miemie_favicon.ico" />
    <link href="~/Content/layui/css/layui.css" rel="stylesheet" />
    <script src="~/Content/layui/layui.js"></script>
    <script type="text/javascript" src="/Scripts/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        layui.use(['form', 'layedit', 'laydate'], function () {
            var form = layui.form
                , layer = layui.layer
                , layedit = layui.layedit
                , laydate = layui.laydate;

            

            //创建一个编辑器
            var editIndex = layedit.build('LAY_demo_editor');

            $(document).ready(function () {
                var _token = cookie("token");
                
                $.ajax({
                    url: "/YunRuiFarmAPI/GoatAppointmentGetLoginMessageAPI", //请求的URL
                    cache: true, //不从缓存中取数据
                    data: {
                        "Token": _token,
                    }, //发送的参数
                    type: 'post', //请求类型
                    dataType: 'json', //返回类型是JSON
                    timeout: 20000, //超时
                })
                    .done(function (result) {
                        if (result.IsSuccess)
                        {
                            $("#Name").html("<img src= \"/Content/image/小埋1.jpg\" class=\"layui-nav-img\"/>" + result.Name);
                            $("#name").val(result.Name);
                            $("#contacts").val(result.Contacts);
                        }
                        else {
                            $("#Name").html("<img src= \"/Content/image/小埋1.jpg\" class=\"layui-nav-img\"/>" + "请先登录")
                            $("#UsecCenter").html("<dd><a href=\"/YunRuiFarm/Login\">登录</a></dd>");
                            $("#Operation").html("");
                        }
                    });
                $.ajax({
                    url: "/YunRuiFarmAPI/AgriculturalDetailGetMessageAPI", //请求的URL
                    cache: true, //不从缓存中取数据
                    data: {
                        "Id": getQueryString("Id"),
                    }, //发送的参数
                    type: 'post', //请求类型
                    dataType: 'json', //返回类型是JSON
                    timeout: 20000, //超时
                    error: function (xhr, err) {
                        alert("不存在该商品");
                        setTimeout(function () {
                            window.location.href = "/YunRuiFarm/Agricultural";
                        }, 3000);
                    },
                    success: function (result) {
                        modelPrice = result.Price;
                        modelTotal = result.Price;
                        modelCount = parseInt(result.Total);
                        modelKind = result.Kind;
                        modelStyle = result.Style;
                        $("#Detail").empty();
                        $("#AgriculturalName").empty();
                        $("#AgriculturalIntroduce").empty();
                        $("#content-left-img").empty();
                        var extstr = "";
                        if (result.Style == 0) {
                            extstr += `
                            当前库存：${result["Total"]}千克<br>
                            单价：${result["Price"]}元/千克<br>
                            保质期：${result["Time"]}天<br>
                            <div id="Total" value="${result["Price"]}">总金额：${result["Price"]}元<br></div>`;
                        }
                        else {
                            extstr += `
                            当前库存：${result["Total"]}只<br>
                            单价：${result["Price"]}元/千克<br>
                            保质期：${result["Time"]}天<br>
                            `;
                        }
                        $("#Detail").append(extstr);
                        $("#AgriculturalName").append(`${result["Kind"]}`);
                        $("#AgriculturalIntroduce").append(`${result["Introduce"]}`);
                        var img = ` <img src="${result["Picture"]}" />`;
                        $("#content-left-img").append(img)
                    }
                });
                
                //清除cookie
                $("#Cancellation").click(function () {
                    layer.msg("清除token");
                    delcookie("token", "", { expires: -1 });
                    window.location.href = "/YunRuiFarm/Login";
                });
                $("#power").click(function () {
                    $.ajax({
                        url: "/YunRuiFarmAPI/GetAdministratorsPower", //请求的URL
                        cache: true, //不从缓存中取数据
                        data: {
                            "Token": _token
                        }, //发送的参数
                        type: 'post', //请求类型
                        dataType: 'json', //返回类型是JSON
                        timeout: 20000, //超时
                        error: function (xhr, err) {

                        },
                        success: function (result) {
                            if (result.IsSuccess)
                                window.location.href = result.Message;

                        }
                    })
                });
                
                //增减按钮
                $("#Reduce").click(function () {
                    if ($('#number').val() > 1) {
                        $('#number').val(parseInt($('#number').val()) - 1);
                    }
                    var Total = `总金额：` + parseFloat(parseFloat($('#Total').attr("value")) * parseInt($('#number').val())).toFixed(2)+`元`;
                    $("#Total").empty();
                    $("#Total").append(Total);
                    modelTotal = parseFloat(modelPrice * parseInt($('#number').val())).toFixed(2);
                });
                $("#Add").click(function () {
                    if (parseInt($('#number').val()) < modelCount) {
                        $('#number').val(parseInt($('#number').val())+1);
                    }
                    var Total = `总金额：` + parseFloat(parseFloat($('#Total').attr("value")) * parseInt($('#number').val())).toFixed(2) + `元`;
                    $("#Total").empty();
                    $("#Total").append(Total);
                    modelTotal = parseFloat(modelPrice * parseInt($('#number').val())).toFixed(2);
                });
                $("#Return").click(function () {
                    window.location.href = "/YunRuiFarm/Agricultural";
                });
                
            });

            function getQueryString(name) {
                var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
                var r = window.location.search.substr(1).match(reg);
                if (r != null) {
                    return unescape(r[2]);
                }
                return 1;
            }
            function cookie(key, value, options) {
                if (typeof value === "undefined") {
                    var cookies = document.cookie.split("; ");
                    for (var i = 0, len = cookies.length; i < len; i++) {
                        var cookie = cookies[i].split("=");
                        if (decodeURIComponent(cookie[0]) === key) {
                            return decodeURIComponent(cookie[1]);
                        }
                    }
                    return null;
                }
            }
            //删除cookie
            function delcookie(key, value, options) {
                options = options || {};
                var cookie = encodeURIComponent(key) + "=" + value;
                if ((typeof options.expires) !== "undefined") {
                    if (typeof options.expires === "number") {
                        var days = options.expires,
                            t = options.expires = new Date();
                        t.setDate(t.getDate() + days);
                    }
                    cookie += ";expires=" + options.expires.toUTCString();
                }
                if (typeof options.path !== "undefined")
                    cookie += ";path=" + options.path;
                if (typeof options.domain !== "undefined")
                    cookie += ";domain=" + options.domain;
                if (options.secure)
                    cookie += ";secure";
                document.cookie = cookie;
            }

            layui.use('layer', function () { //独立版的layer无需执行这一句
                var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

                //触发事件
                var active = {
                    notice: function () {
                        var str1 = "斤";
                        if (modelStyle == 1)
                            str1="只"
                        var str2= "";
                        if (modelStyle == 0)
                            str2 = "总金额：" + modelTotal + "元<br>";
                        //示范一个公告层
                        layer.open({
                            type: 1
                            , title: false //不显示标题栏
                            , closeBtn: false
                            , area: '300px;'
                            , shade: 0.8
                            , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                            , btn: ['确认预订', '暂不预订']
                            , btnAlign: 'c'
                            , moveType: 1 //拖拽模式，0或者1
                            , content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">你好，尊敬的用户！<br>您的订单内容如下:<br><br>预订种类：' + modelKind + '<br>数量：' + $('#number').val() + str1+ '<br>单价：' + modelPrice + '元/千克<br>'+ str2 +'<br></div>'
                            , success: function (layero) {
                                var btn = layero.find('.layui-layer-btn');
                                btn.find('.layui-layer-btn0').attr({

                                    load: Adopt
                                    , target: '_blank'
                                });
                            }
                        });
                    }
                };

                $('#layerDemo .layui-btn').on('click', function () {
                    var othis = $(this), method = othis.data('method');
                    active[method] ? active[method].call(this, othis) : '';
                });
                function Adopt() {
                    //预约
                    var _token = cookie("token");
                    $(".layui-layer-btn0").click(function () {
                        $.ajax({
                            url: "/YunRuiFarmAPI/AgriculturalAdoptAPI", //请求的URL
                            cache: true, //不从缓存中取数据
                            data: {
                                "Id": getQueryString("Id"),
                                "Price": modelPrice,
                                "Number": parseInt($('#number').val()),
                                "Total": modelTotal,
                                "Token": _token,
                                "Name": $('#name').val(), 
                                "Contacts": $('#contacts').val(),
                                "Style": modelStyle
                            }, //发送的参数
                            type: 'post', //请求类型
                            dataType: 'json', //返回类型是JSON
                            timeout: 20000, //超时
                            error: function (xhr, err) {
                                alert("预订失败");
                            },
                            success: function (result) {
                                if (result.Message == "未获取到token") {
                                    layer.msg("请先登录");
                                    setTimeout(function () {
                                        window.location.href = '/YunRuiFarm/Login'
                                    }, 3000);
                                }
                                else
                                alert(result.Message);
                            }
                        })
                    });



                }
            });
        });
        
    </script>
    <script>
        layui.use('element', function () {
            var element = layui.element;
        });
        var url = document.location.toString();
        var arrUrl = url.split("=");
        var para = arrUrl[1];


    </script>
    <style>
        body {
            font-size: 18px;
        }

        #content-left {
            width: 48%;
            height: 88%;
            margin-left:1%;
            margin-right:1%;
            margin-top:1%;
            margin-bottom:1%;
            float: left;
            background-color: rgba(255,255,255,0.5);
        }
        #content-left-img {
            width: 97%;
            height: 60%;
            margin-right: 1%;
            margin-left: 1%;
            margin-top: 1%;
            margin-bottom: 1%;
            float: left;
        }
        #content-button {
            width: 97%;
            height: 20%;
            margin-right: 1%;
            margin-left: 1%;
            float: left;
        }
        #content-right {
            width: 49%;
            height: 88%;
            float: right;
            margin-right: 1%;
            margin-top: 1%;
            margin-bottom: 1%;
            background-color: rgba(255,255,255,0.5);
        }

        #content-right-top {
            float: left;
            width: 98%;
            height: 90%;
            margin-right: 1%;
            margin-top: 1%;
            margin-bottom: 1%;
        }

        
        img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header" style="width:auto">
            <div class="layui-logo" style=" background-image: url('../../Content/image/logo.jpg');background-size:100% 100%;"></div>
            <!-- 头部区域（可配合layui已有的水平导航） -->
            <ul class="layui-nav layui-layout-left" style="font-size: 20px;">
                <li class="layui-nav-item"><a href="/YunRuiFarm/Index">首页</a></li>
                <li class="layui-nav-item"><a href="/YunRuiFarm/Adopt">羊领养预约</a></li>
                <li class="layui-nav-item"><a href="/YunRuiFarm/Agricultural">农副产品预约</a></li>
                <li class="layui-nav-item"><a href="/YunRuiFarm/Restaurant">餐饮预约</a></li>
            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="javascript:;" id="Name">
                        <img src="/Content/image/小埋1.jpg" class="layui-nav-img" />请先登录
                    </a>
                    <dl class="layui-nav-child" id="UsecCenter">
                        <dd><a href="/YunRuiFarm/UserInfo">基本资料</a></dd>
                        <dd><a href="/YunRuiFarm/UserAgriculturalOrder">我的订单</a></dd>
                        <dd><a href="/YunRuiFarm/UserFeedback">反馈信息</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item" id="Operation">
                    <a href="javascript:;">账户操作</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" id="power">切换到管理员</a></dd>
                        <dd><a href="javascript:;" id="Cancellation">注销</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <li class="layui-nav-item layui-nav-itemed">
                        <a class="" href="javascript:;">农副产品</a>
                        <dl class="layui-nav-child">
                            <dd><a href="/YunRuiFarm/Agricultural">农副产品信息</a></dd>
                            <dd><a href="/YunRuiFarm/UserAgriculturalOrder">我的订单</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>
        <div class="layui-body" style="height:100%;background-image: url('../../Content/image/grass.jpg');background-repeat:no-repeat; background-attachment: fixed;background-size:100%">
            <!-- 内容主体区域 -->
            <div id="content-left">
                <div id="content-left-img">
                    <img src="~/Content/image/农副产品/土鸡蛋.png" />
                </div>
                <blockquote class="layui-elem-quote layui-quote-nm" style="width:92%;height:30%;float:left;margin-top:1.5%;margin-left:1%;">
                    一、预订后，农场主将会在当天晚上10点前接单，在接单之前可以自由取消订单。<br />
                    二、成功预订后，农场主将会将预订的农副产品保存，在您方便的时候来自取。<br />
                    三、每一件农副产品有相应的保质期，即将超过保质期时订单会自动取消，农场主将自行处理。<br />
                </blockquote>

            </div>
            <div id="content-right">
                <div id="content-right-top">
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 5px;margin-bottom:5px;">
                        <legend style="margin-left:10%" id="AgriculturalName">土鸡蛋</legend>
                    </fieldset>
                    <blockquote class="layui-elem-quote layui-quote-nm" style="width:94%;height:20%;float:left;" id="AgriculturalIntroduce">
                        土鸡散养于山上，自己刨食吃
                    </blockquote>
                    <blockquote class="layui-elem-quote layui-quote-nm" style="width:94%;height:20%;float:left;" id="Detail">
                    </blockquote>
                    
                    <div class="layui-inline" style="margin-top:5px;">
                        <label class="layui-form-label">联系人</label>
                        <div class="layui-input-inline">
                            <input type="tel" name="fullname" lay-verify="fullname" autocomplete="off" class="layui-input" id="name">
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-top:5px;">
                        <label class="layui-form-label">联系方式</label>
                        <div class="layui-input-inline">
                            <input type="tel" name="fullname" lay-verify="fullname" autocomplete="off" class="layui-input" id="contacts">
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-top:5px;">
                        <label class="layui-form-label">数量</label>
                        <div class="layui-input-inline">
                            <button class="layui-icon" style="float:left;height:38px;width:20px;" id="Reduce">&#xe603;</button>
                            <input type="tel" name="fullname" lay-verify="fullname" autocomplete="off" class="layui-input" id="number" readonly="readonly" style="width:18%;float:left;text-align:center;" value="1">
                            <button class="layui-icon" style="float:left;height:38px;width:20px;" id="Add">&#xe602;</button>
                        </div>

                    </div>
                    
                    <div id="content-button">
                        <div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;margin-top:5%">
                            <button class="layui-btn" data-method="notice" style="float:left;margin-left:10%;margin-bottom:5%   ">预订</button>
                        </div>
                        <button class="layui-btn" id="Return" style="float:left;margin-left:10%;margin-bottom:5%">返回</button>
                    </div>
                    
                </div>
            </div>

        </div>
    <script>
        
    </script>
</body>
</html>
